<template>
  <div class="app">


    <a-card :bordered="false">









      <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">
          <a-form-item label="电键" class="smart-query-form-item">
            <a-input style="width: 200px" v-model:value="queryForm.id" placeholder="电键" />
          </a-form-item>
          <a-form-item class="smart-query-form-item">
            <a-button-group>
              <a-button type="primary" @click="onSearch">
                <template #icon>
                  <SearchOutlined />
                </template>
                查询
              </a-button>
              <a-button @click="resetQuery" class="smart-margin-left10">
                <template #icon>
                  <ReloadOutlined />
                </template>
                重置
              </a-button>
            </a-button-group>
          </a-form-item>
        </a-row>
      </a-form>
      <!---------- 查询表单form end ----------->




      <!---------- 表格操作行 begin ----------->
      <a-row class="smart-table-btn-block">
        <a-button-group>
          <a-button @click="add" type="primary">
            <template #icon>
              <PlusOutlined />
            </template>
            新建
          </a-button>
        </a-button-group>

        <div class="smart-table-setting-block">
          <TableOperator v-model="columns" :tableId="null" :refresh="queryData" />
        </div>
      </a-row>
      <!---------- 表格操作行 end ----------->

      <!---------- 表格 begin ----------->
      <a-table :dataSource="tableData" :columns="columns" rowKey="id" :loading="tableLoading" :pagination="false">
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.dataIndex === 'id'">
            <a @click="onTo(text)">{{ text }} </a>
          </template>
          <template v-if="column.dataIndex === 'qty'">
            <span>{{ excute(text) }}</span>
          </template>
        </template>
      </a-table>
      <!---------- 表格 end ----------->

      <div class="smart-query-table-page">
        <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.pageSize" v-model:current="queryForm.pageNum"
          v-model:pageSize="queryForm.pageSize" :total="total" @change="queryData" @showSizeChange="queryData"
          :show-total="(total) => `共${total}条`" />
      </div>
    </a-card>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';

import { mmordApi } from '/src/api/business/erp/mmord-api';
import { PAGE_SIZE_OPTIONS } from '/src/constants/common-const';
import { smartSentry } from '/src/lib/smart-sentry';
import TableOperator from '/src/components/support/table-operator/index.vue';
import { useRouter } from 'vue-router';
import { excute } from "../../../../utils/numformat-util.js";
// ---------------------------- 表格列 ----------------------------
const router = useRouter();

const columns = ref([
  {
    title: '电键',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '单据状态',
    dataIndex: 'docStatus',
    align: 'center',
  },
  {
    title: '审核',
    dataIndex: 'approved',
    align: 'center',
  },
  {
    title: '部门编码',
    dataIndex: 'deptId',
    align: 'left',
  },
  {
    title: '部门名称',
    dataIndex: 'deptName',
    align: 'left',
  },
  {
    title: '产品编码',
    dataIndex: 'itemId',
    align: 'left',
  },
  {
    title: '产品名称',
    dataIndex: 'itemName',
    align: 'left',
  },
  {
    title: '数量',
    dataIndex: 'qty',
    align: 'right',
  },
  {
    title: '合同号',
    dataIndex: 'connum',
    align: 'right',
  },
  {
    title: '创建者',
    dataIndex: 'createBy',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    width: 200,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center',
  },
]);

// ---------------------------- 查询数据表单和方法 ----------------------------

const queryFormState = {
  id: undefined, //电键
  pageNum: 1,
  pageSize: 10,
};
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);

// 重置查询条件
function resetQuery() {
  let pageSize = queryForm.pageSize;
  Object.assign(queryForm, queryFormState);
  queryForm.pageSize = pageSize;
  queryData();
}

// 搜索
function onSearch() {
  queryForm.pageNum = 1;
  queryData();
}

// 查询数据
async function queryData() {
  tableLoading.value = true;
  try {
    let queryResult = await mmordApi.queryPage(queryForm);
    tableData.value = queryResult.data.list;
    total.value = queryResult.data.total;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

function onTo(item) {
  router.push({ path: 'mmorda', query: { type: 'info', id: item } });
}

function add() {
  router.push({ path: 'mmorda', query: { type: 'new', id: null } });
}

onMounted(queryData);
</script>
